<template>
	<view class="container">
		<view class="image-content">
			<image mode="widthFix"
				src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210627/15ea41aa56cef4765edf307eb626f2c8.jpg">
			</image>
		</view>
		<view class="thorui-preview__bd">
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">适用门店</view>
				<view class="thorui-preview__value">全部门店</view>
			</view>
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">有效期限</view>
				<view class="thorui-preview__value" v-if="detail.validType===0">{{detail.validDate}}</view>
				<view class="thorui-preview__value" v-else>{{detail.validDays}}天</view>
			</view>

			<view class="thorui-preview__item">
				<view class="thorui-preview__label">使用次数</view>
				<view class="thorui-preview__value">{{detail.limitUsesCount===0?"不限次数":detail.limitUsesCount}}</view>
			</view>

			<view class="thorui-preview__item">
				<view class="thorui-preview__label">使用须知</view>
				<rich-text class="thorui-preview__value" :nodes="detail.remark"></rich-text>
			</view>
		</view>
		<view class="price-tabbar">
			<view class="price-content">
				<view class="mark">￥</view>
				<view class="price">{{detail.amount}}</view>
			</view>
			<view>
				<tui-button width="200rpx" height="70rpx" :size="28" shape="circle" @click="paymentClick">
					确认支付</tui-button>
			</view>
		</view>
		<t-pay-way :amuont="detail.amount" :associatedId="detail.id" orderType="0" :show="onPayPopupShow"
			@close="onPayPopupClose" @onPayCallback="onPayCallback"></t-pay-way>
	</view>
</template>

<script>
	import {
		giftcardDetail
	} from '@/api/activity.js'

	import {
		orderCreateAdvance
	} from "@/api/order.js"

	import {
		mapGetters
	} from 'vuex';
	import WechatApi from '@/libs/wechat.js';
	import tPayWay from "@/components/views/t-pay-way/t-pay-way"
	export default {
		components: {
			tPayWay
		},
		data() {
			return {
				onPayPopupShow: false,
				detail: {}
			};
		},
		//发送给朋友
		onShareAppMessage: function() {
			var that = this;
			uni.report('onShareTimeline', '分享好友');
			return {
				title: this.detail.title,
				imageUrl: this.detail.shareImg,
				path: '/subpkg/invite/accept?id='
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			uni.report('onShareTimeline', '分享朋友圈');
			return {
				title: this.detail.title,
				imageUrl: this.detail.shareImg,
				path: '/subpkg/invite/accept?id='
			};
		},
		onLoad() {
			giftcardDetail('1409335579144954858').then(res => {
				this.detail = res.data
				uni.setNavigationBarTitle({
					title: this.detail.title
				})
			})
		},
		computed: {
			...mapGetters('m_user', ['curretnStore', 'isLogin', 'userInfo'])
		},
		methods: {
			onPayPopupClose() {
				this.onPayPopupShow = false
			},
			/**
			 * 支付事件回调
			 */
			onPayCallback: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 付款类型改变回调
			 * @param {Object} type
			 */
			onModeChange(type) {
				console.log(type)
			},

			/**
			 * 自定义付款提交
			 * @param {Object} type
			 */
			onPay(type) {
				console.log(type)
			},
			/**
			 * 付款完成回调，自定义后就不会调了
			 */
			onPayComplete(data) {
				this.onPayPopupClose();
				uni.redirectTo({
					url: `/subpkg/pay/offline?id=${data.orderId}&orderType=0&type=4`
				});
			},
			/**
			 * 付款失败回调，自定义后就不会调了
			 */
			onPayFail() {

			},
			// 支付
			paymentClick() {
				this.onPayPopupShow = true;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 98rpx;
	}

	.image-content {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: -99999;

		image {
			width: 100%;
		}
	}


	/*
  preview
*/
	.thorui-preview__hd {
		position: relative;
		padding: 30rpx;
		text-align: right;
		line-height: 2.5em;

	}

	.thorui-preview__hd:after {
		content: " ";
		position: absolute;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid var(--thorui-line-color);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		left: 30rpx
	}

	.thorui-preview__value {
		display: block;
		overflow: hidden;
		word-break: normal;
		// text-align: left;
		word-wrap: break-word;
		color: var(--thorui-text-color)
	}

	.thorui-preview__hd .thorui-preview__value {
		font-style: normal;
		font-size: 1.6em
	}

	.thorui-preview__bd {
		padding: 30rpx;
		font-size: .9em;
		text-align: right;
		color: var(--thorui-text-color);
		line-height: 2;
		margin-bottom: 106rpx;
	}

	.thorui-preview__ft {
		position: relative;
		height: 100rpx;
		display: flex;
	}

	.thorui-preview__ft:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid var(--thorui-line-color);
		transform-origin: 0 0;
		transform: scaleY(.5)
	}

	.thorui-preview__item {
		overflow: hidden;
		margin: 10rpx 0;
	}

	.thorui-preview__label {
		float: left;
		margin-right: 1em;
		min-width: 4em;
		color: var(--thorui-text-color-label);
		text-align: justify;
		text-align-last: justify
	}

	.thorui-preview__btn,
	.thorui-preview__btn_default {
		flex: 1;
		color: var(--thorui-color-link);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.thorui-preview__btn_default {
		color: var(--thorui-text-color);
		position: relative;
	}

	.thorui-preview__btn_default::after {
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-right: 1px solid var(--thorui-line-color);
		transform-origin: 100% 0;
		transform: scaleX(.5)
	}

	.price-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 996;
	}

	.price-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.price-content {
		display: flex;
		align-items: baseline;

		.mark {
			font-size: 26rpx;
			line-height: 26rpx;
		}

		.price {
			font-size: 45rpx;
			line-height: 42rpx;
			font-weight: 600;
		}

	}
</style>
